<template>
  <div id="app">
    <nav class="bg-white shadow-md p-4">
      <div class="container mx-auto flex items-center justify-between">
        <div>
          <router-link to="/" class="text-xl font-bold text-blue-600">百家乐策略测试</router-link>
        </div>
        <div class="space-x-4">
          <router-link to="/" class="px-3 py-2 rounded-md text-sm font-medium hover:bg-gray-100 transition-colors" active-class="bg-blue-50 text-blue-600">
            人工测试
          </router-link>
          <router-link to="/simulation" class="px-3 py-2 rounded-md text-sm font-medium hover:bg-gray-100 transition-colors" active-class="bg-blue-50 text-blue-600">
            批量模拟测试
          </router-link>
          <router-link to="/results" class="px-3 py-2 rounded-md text-sm font-medium hover:bg-gray-100 transition-colors" active-class="bg-blue-50 text-blue-600">
            测试结果查看
          </router-link>
          <router-link to="/statistics" class="px-3 py-2 rounded-md text-sm font-medium hover:bg-gray-100 transition-colors" active-class="bg-blue-50 text-blue-600">
            统计分析
          </router-link>          
          <router-link to="/bet-strategy-tables" class="px-3 py-2 rounded-md text-sm font-medium hover:bg-gray-100 transition-colors" active-class="bg-blue-50 text-blue-600">
            策略表管理
          </router-link>
        </div>
      </div>
    </nav>
    
    <router-view />
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

body {
  overflow-x: hidden;
  overflow-y: auto;
  height: 100%;
  width: 100%;
}

html {
  height: 100%;
}

#app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* 设置滚动条样式 */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: rgba(241, 241, 241, 0.3);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb {
  background: rgba(136, 136, 136, 0.3);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(136, 136, 136, 0.5);
}

/* 自定义滚动条样式类 */
.scrollbar-thin {
  scrollbar-width: thin;
}

.scrollbar-thin::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}

.scrollbar-thin::-webkit-scrollbar-thumb {
  background: rgba(136, 136, 136, 0.3);
}

/* 增加一些动画效果 */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.fade-in {
  animation: fadeIn 0.5s ease-in;
}

@keyframes slideInRight {
  from { transform: translateX(50px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

.slide-in-right {
  animation: slideInRight 0.5s ease-out;
}

@keyframes slideInLeft {
  from { transform: translateX(-50px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

.slide-in-left {
  animation: slideInLeft 0.5s ease-out;
}

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

.win-pulse {
  animation: pulse 0.7s ease-in-out infinite;
}
</style> 